<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>登陆</title>
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <style>
    input {
      margin: 10px 0;
    }
  </style>
</head>

<body>
  <header>
    <div class="accound">
      <a href="login.html" class="active">登陆</a>
      <a href="register.html">注册</a>
    </div>
  </header>
  <div class="container">
    <form class="form-signin">
      <h2 class="form-signin-heading">请登录</h2>
      <label for="inputEmail" class="sr-only">邮箱</label>
      <input type="email" id="inputEmail" class="form-control" placeholder="邮箱" required autofocus>
      <label for="inputPassword" class="sr-only">密码</label>
      <input type="password" id="inputPassword" class="form-control" placeholder="密码" required>
      <button class="btn btn-lg btn-primary btn-block" type="button">登陆</button>
    </form>

  </div> <!-- /container -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    let $btn = $(".form-signin .btn");
    let $usr = $("#inputEmail");
    let $pwd = $("#inputPassword");
    $btn.click(() => {
      let data = {
        usr: $usr.val(),
        pwd: $pwd.val()
      }
      $.ajax({
        url: "http://localhost:82/login.php",
        type: "post",
        data,
        success(res) {
          if (res == $usr.val()) {
            alert("登陆成功");
            let signInState = JSON.parse(localStorage.getItem("sign_in_state")) || {state: "", usr: ""};
            signInState.state = true;
            signInState.usr = res;
            localStorage.setItem("sign_in_state", JSON.stringify(signInState));
            window.location.href = "app.html";
          }
          if (res == 400) {
            alert("密码错误");
          }
          if (res == 401) {
            alert("账户不存在");
          }
        },
        error(err) {
          alert(400)
        }
      })
    })
  </script>
</body>

</html>